<template>
 <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: cadetblue"><!--align-items: center;居中、、justify-content: center;水平居中-->
    <div style="display: flex; background-color: white; width: 80%; height: 60%; border-radius: 5px;">
      <div style="flex: 1;display: flex;align-items: center;"><!--把上一行的div拆分为俩个部分，左右各一个-->
        <img src="@/assets/work.png" alt="" style="width: 100%;height: 100%;">
      </div>
      <div style="flex: 1;display: flex; align-items: center; justify-content: center">
        <el-form :model="user" style="width: 80% " :rules="rules" ref="loginRef"><!-- // rules表单提示必须输入账号或者密码 -->
            <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px">欢迎登录后台管理系统</div>
            <el-form-item prop="AccountNumber">
              <el-input prefix-icon="el-icon-user" placeholder="请输入账号" v-model="user.AccountNumber"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input prefix-icon="el-icon-lock" show-password placeholder="请输入密码" v-model="user.password"></el-input>
            </el-form-item>
          <el-form-item prop="yzm">
            <div style="display: flex;">
              <el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" style="flex: 1" v-model="user.yzm"></el-input>
              <div style="flex: 1;text-align: right;">
                <valid-code @getVerifyCode:value="getCode" />
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%;" @click="login()">登 陆</el-button>
          </el-form-item>
          <div style="display: flex">
            <div style="flex: 1">还没有账号？请 &nbsp<span style="color: green; cursor: pointer;" @click="$router.push('register')">注册</span></div>
            <div style="flex: 1;text-align: right"><span style="color: green; cursor: pointer;">忘记密码</span></div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import ValidCode from "@/components/ValidCode";

export default {
  name: "Login",
  components:{
    ValidCode
  },
  data() {
    const validateCode = (rule, value, callback) => {//验证码校验
      if (value === '') {
        callback(new Error('请输入验证码'));
      } else if (value.toLowerCase() !== this.user.yzm){
        callback(new Error('验证码错误！请重新输入'));
      } else {
        callback();
      }
    };
    return{
      user: {

        AccountNumber: '',
        password: '',
        yzm:'',
      },
      rules :{//表单提示必须输入账号或者密码
        AccountNumber: [
          { required:true, message:'请输入账号', trigger:'blur'},
        ],
        password : [
          { required:true, message:'请输入密码', trigger:'blur'},
        ],
        yzm : [
          { validator: validateCode, trigger:'blur'},
        ]
      },

    }

  },
  methods: {
    getCode(value){//验证码里的方法
      this.user.yzm = value.toLowerCase();// 将获取到的验证码存储到 user.yzm 中   .toLowerCase()校验小写
    },
    login : function (){
      this.$refs["loginRef"].validate((valid) => {//用来判断你输入或没输入账号密码验证码
      if (valid) {
        var that = this ;
        this.$axios.post("/login/login",{
          username : this.user.AccountNumber,
          password : this.user.password,
        })
            .then(function (response){
              if(response.data.code == "0000"){

                console.log("----登陆成功----")
                let isAuthenticated = "true";
                sessionStorage.setItem(
                    "ture",//key名称
                    isAuthenticated//随便给个值，只要不是空即可
                )
                console.log("----isAuthenticated----"+isAuthenticated)
                that.$router.push('/yemian/homepage');//跳转页面
                that.$message('登陆成功');

              }else if(response.data.code == "2222"){
                console.log("----登陆失败----")
                that.$message('账号密码输入错误');
              }
            })
        console.log("登 陆 账 号！！！"+this.user.AccountNumber)
        console.log("登 陆 密 码！！！"+this.user.password)
        console.log("登 陆 验 证 码！！！"+this.user.yzm)
      }
    });

    },

  }
}
</script>

<style>

</style>
